<template>
    <div class="container">
        <div class="login">
            <div class="login-title">{{loginTitle}}</div>
            <el-row>
                <el-col :span="24">
                    <el-input class="login-input" v-model="login.userName" :placeholder="userNameTips"></el-input>
                </el-col>
                <el-col :span="24">
                    <el-input class="login-input" v-model="login.password" :placeholder="passwordTips"
                              show-password></el-input>
                </el-col>
                <el-col :span="24">
                    <el-button class="login-btn" type="primary" @click="doLogin()">登陆</el-button>
                </el-col>
                <el-col :span="24">
                    <span class="login-tips" @click="changeLoginType()">{{loginTypeTitle}} ></span>
                </el-col>
            </el-row>


        </div>
    </div>
</template>

<script>
    import {login} from '../../api/common'
    import {setToken} from '../../utils/cookie'
    export default {
        name: "Login",
        components: {},
        data() {
            return {
                loginType: 1, //1-用户登陆  2-商户登陆
                loginTitle: "顾客登陆",
                loginTypeTitle: "切换至商家登陆",
                userNameTips: "请输入用户名",
                passwordTips: "请输入用户密码",
                login: {
                    userName: '',
                    password: ''
                }
            }
        },
        methods: {
            doLogin() {
                localStorage.removeItem('bus-user')
                let param = {
                    username: this.login.userName,
                    password: this.login.password,
                    type: this.loginType
                }
                if (!param.username){
                    this.$message.info("用户名不能为空")
                    return;
                }
                if (!param.password){
                    this.$message.info("密码不能为空")
                    return;
                }
                login(param).then(res => {
                    if (res.code == 200){
                        setToken(res.data.token)
                        localStorage.setItem("bus-user",JSON.stringify(res.data.user))
                        if (res.data.user.type == 1){
                            this.$router.push("/shopList")
                        }else if (res.data.user.type == 2) {
                            this.$router.push("/mgrPage/shopMgr")
                        }
                    }else {
                        this.$message.info(res.msg || "登陆失败")
                    }
                })
                //this.$router.push("/mgrPage")
            },
            changeLoginType() {
                if (this.loginType == 1) {
                    this.loginType = 2
                    this.loginTitle = "商家登陆"
                    this.loginTypeTitle = "切换至顾客登陆"
                    this.userNameTips = "请输入商户账号"
                    this.passwordTips = "请输入商户密码"
                } else {
                    this.loginType = 1
                    this.loginTitle = "用户登陆"
                    this.loginTypeTitle = "切换至商户登陆"
                    this.userNameTips = "请输入用户名"
                    this.passwordTips = "请输入用户密码"
                }
                this.login = {
                    login: '',
                    password: ''
                }
            }
        }
    }
</script>

<style scoped>
    .container {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #42b983;
    }

    .login {
        background-color: white;
        width: 500px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 5px;
    }

    .login-title {
        height: 40px;
        width: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        margin-top: 15px;
        letter-spacing: 2px;
    }

    .login-input {
        margin-left: 15%;
        width: 70%;
        margin-top: 20px;
    }

    .login-btn {
        margin-left: 15%;
        width: 70%;
        margin-top: 40px;
        letter-spacing: 15px;
    }

    .login-tips {
        margin-left: 15%;
        width: 70%;
        font-size: 14px;
        color: #42b983;
        text-align: right;
        display: block;
        margin-top: 8px;
        cursor: pointer;
    }
</style>
